<template>
	
    <view>
		
		<view class="content">
		    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
		        :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
		        :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
		        :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
		        :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
		        :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
		        @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
				
				 <!-- cover-view 直接与 map 同级 -->
				    <cover-view class="controls-panel" >
						
						<view class="controls-panel-bg">
							<image src="/static/bar_bg.png" style="width: 90vw;height: 160rpx;"></image>
						</view>
						
							<view class="uni-flex uni-row" style="position: absolute;width: 90vw;height: 180rpx;line-height: 180rpx;">
								<view class="flex-item" style="width: 25%;" @click="openLogin"></view>
								<view class="flex-item" style="width: 33.3%;"><image @click="onNowIconClick" :src="nowIcon" mode="aspectFit" style="width: 120rpx;height: 120rpx;padding-top: 8rpx;"></image></view>
								<view class="flex-item" style="width: 33.3%;"><image @click="openRecord" :src="recordIcon" style="width: 90rpx;height: 110rpx;padding-top: 15rpx;"></image></view>
							</view>
							
				            <!-- <button class="button" @click="addMarkers">addMarkers</button>
				            <button class="button" @click="addPolyline">addPolyline</button>
				            <button class="button" @click="addCircles">addCircles</button> -->
				            <!-- 其他按钮 -->
				        <!-- </cover-view> -->
				    </cover-view>
		</view>
        
    </view>
	
	<view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
	
	<!-- 登录弹窗 -->
	<uni-popup ref="popupLogin" :mask-click="false">
		<view class="uni-flex uni-column">
			
			<view class=" flex-item-V" style="" >
				
				<view style="width: 100vw;text-align: center;">
					
					<view class=" flex-item-V " style="width: 100vw;text-align: center;color: white;font-size: 24px;">
						签到登录
					</view>
					
					<view  style="padding-left: 10rpx;padding-right: 10rpx;">
						<image src="/static/ic_login_bg.png" style="width: 90vw;height: 260rpx;"></image>
					</view>
				        <!-- <button class="button" @click="addMarkers">addMarkers</button>
				        <button class="button" @click="addPolyline">addPolyline</button>
				        <button class="button" @click="addCircles">addCircles</button> -->
				        <!-- 其他按钮 -->
				    <!-- </cover-view> -->
				</view>
				
			</view>
			
			<view style="position: absolute;width: 90vw;top: 120rpx;">
				<view class="uni-flex uni-row" style="height: 120rpx;line-height: 100rpx;" >
					<view class="" style="width: 15%;"></view>
					<view class="" style="margin-right: 10rpx;" ><image src="/static/ic_portrait.png" style="width: 50rpx;height: 50rpx;vertical-align: middle;"></image></view>
					<view class="" ><image  src="/static/ic_shu.png"  mode="aspectFit" style="width: 20rpx;height: 80rpx;vertical-align: middle;"></image></view>
					<view >
						<view class="uni-input-wrapper uni-flex" >
							<view ><input class="uni-input" v-model="inputValue"  style="margin-top: 10rpx;" placeholder="请输入您的姓名" :value="inputClearValue" @input="clearInput" /></view>
							<view ><text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text></view>
						</view>
					</view>
				</view>
				<view class="divider" style="width: 80vw;margin-top: 10rpx;margin-left: 40rpx;">
						
				</view>
				
				<view style="width: 100vw; display: flex; justify-content: center;">
				    <view style="width: 50vw;height: 100rpx;margin-top: 20rpx;">
				        <button @click="requestLogin" style="width: 150rpx;height: 60rpx;font-size: 12sp;line-height: 60rpx;color: white;background-color: orange;" >登录</button>	
				    </view>
				</view>
			</view>
			
			
			<!-- <view class="flex-item-V" style="text-align: center;margin-top: 80rpx;">
				<image @click="closeLogin" src="/static/close.png" style="width: 50rpx;height: 50rpx;" mode="aspectFit"></image>		
			</view> -->
		</view>
	</uni-popup>
	
	<!-- 打卡成功(签到)弹窗 -->
	<uni-popup ref="popupSuccess" :mask-click="false">
		<view class="uni-flex uni-column">
			<view class=" flex-item-V ">
				<image @click="goRecord" src="/static/sign_success.png" mode="aspectFit" style="width: 500rpx;height: 650rpx;"></image>	
			</view>
			<view class="flex-item-V" style="text-align: center;margin-top: 20rpx;">
			<image @click="closeSucess" src="/static/close.png" style="width: 50rpx;height: 50rpx;" mode="aspectFit"></image>		
			</view>
		</view>
	</uni-popup>
	
	<!-- 打卡记录弹窗 -->
	<uni-popup ref="popupRecord" :mask-click="false">
		<view class="uni-flex uni-column" style="width: 90vw;">
			<view class=" flex-item-V">
					<uni-card :is-shadow="false" margin=0>
					<view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;"   >
						<view class="record-row-table" style="width: 35%;">地点</view>
						<view class="record-row-table">时间</view>
						<view class="record-row-table">签到</view>
					</view>
					
					<view class="uni-flex uni-row divider">
							
					</view>
					
					<view v-for="item in listData" :key="item.id">
					<view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;"  >
							<view class="uni-flex" style="width: 45%;height: 70rpx;">
								<view><image :src="item.icon"  style="width: 40rpx;height: 40rpx;vertical-align: middle;"  mode="aspectFit"></image>	</view>
								<view style="line-height: 70rpx;margin-left: 20rpx;font-size: 25rpx">{{ item.name }}</view>								
							</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;font-size: 25rpx">{{ formatTime(item.recordTime) }}</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;font-size: 25rpx">
								<image 
								          v-if="item.signed" 
								          src="/static/ic_sign.png" 
								          style="width: 40rpx;height: 40rpx;vertical-align: middle;" 
								          mode="aspectFit"
								        ></image>
								        <text v-else>-</text>
							</view>
							
					</view>
					<view class="uni-flex uni-row divider" ></view>
					</view>
					
					<!-- <view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;" >
							<view class="uni-flex" style="width: 48%;height: 70rpx;">
								<view><image src="/static/ic_orange.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"  mode="aspectFit"></image>	</view>
								<view style="line-height: 70rpx;margin-left: 20rpx;">操场</view>								
							</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;">12:22:19</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;"><image src="/static/ic_sign.png"  style="width: 40rpx;height: 40rpx;vertical-align: middle;" mode="aspectFit"></image></view>
					</view>
					<view class="uni-flex uni-row divider" >
							
					</view>
					
					
					<view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;" >
							<view class="uni-flex" style="width: 48%;height: 70rpx;">
								<view><image src="/static/ic_green.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"  mode="aspectFit"></image>	</view>
								<view style="line-height: 70rpx;margin-left: 20rpx;">大礼堂</view>								
							</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;">12:22:19</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;"><image src="/static/ic_sign.png"  style="width: 40rpx;height: 40rpx;vertical-align: middle;" mode="aspectFit"></image></view>
					</view>
					<view class="uni-flex uni-row divider" >
							
					</view>
					
					<view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;" >
							<view class="uni-flex" style="width: 48%;height: 70rpx;">
								<view><image src="/static/ic_blue.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"  mode="aspectFit"></image>	</view>
								<view style="line-height: 70rpx;margin-left: 20rpx;">学习发展中心</view>								
							</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;">12:22:19</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;"><image src="/static/ic_sign.png"  style="width: 40rpx;height: 40rpx;vertical-align: middle;" mode="aspectFit"></image></view>
					</view>
					<view class="uni-flex uni-row divider" >
							
					</view>
					
					<view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;" >
							<view class="uni-flex" style="width: 48%;height: 70rpx;">
								<view><image src="/static/ic_cyan.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"  mode="aspectFit"></image>	</view>
								<view style="line-height: 70rpx;margin-left: 20rpx;">音乐礼堂</view>								
							</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;">12:22:19</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;"><image src="/static/ic_sign.png"  style="width: 40rpx;height: 40rpx;vertical-align: middle;" mode="aspectFit"></image></view>
					</view>
					<view class="uni-flex uni-row divider" >
							
					</view>
					
					<view class="uni-flex uni-row" style="height: 70rpx;line-height: 70rpx;" >
							<view class="uni-flex" style="width: 48%;height: 70rpx;">
								<view><image src="/static/ic_pink.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"  mode="aspectFit"></image>	</view>
								<view style="line-height: 70rpx;margin-left: 20rpx;">草坪广场</view>								
							</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;">12:22:19</view>
							<view class="record-row-table" style="text-align: center;line-height: 70rpx;"><image src="/static/ic_sign.png"  style="width: 40rpx;height: 40rpx;vertical-align: middle;" mode="aspectFit"></image></view>
					</view>
					<view class="uni-flex uni-row divider" >
							
					</view> -->
					
					<view class="flex-item-V" style="text-align: center;margin-top: 30rpx;margin-bottom: 0rpx;">
						<image @click="doExchange" :src="exchangeIcon" style="width: 200rpx;height: 80rpx;vertical-align: middle;"  mode="aspectFit"></image>		
					</view>
					
					
					</uni-card>
			</view>
			
			<view class="flex-item-V" style="text-align: center;margin-top: 20rpx;">
			<image @click="closeRecord" src="/static/close.png" style="width: 50rpx;height: 50rpx;" mode="aspectFit"></image>		
			</view>
		</view>
	</uni-popup>
	
	<!-- 兑换礼物成功弹窗 -->
	<uni-popup ref="popupExSuccess" :mask-click="false">
		<view class="uni-flex uni-column">
			<view class=" flex-item-V ">
				<image src="/static/ic_ex_success.png" mode="aspectFit"></image>	
			</view>
			<view class="flex-item-V" style="text-align: center;margin-top: 20rpx;">
			<image @click="closeExSucess" src="/static/close.png" style="width: 50rpx;height: 50rpx;" mode="aspectFit"></image>		
			</view>
		</view>
	</uni-popup>
	
</template>
<script>
    import * as util from '/common/util.js'
    var formatLocation = util.formatLocation;
    // #ifdef APP-PLUS
    import permision from "@/common/permission.js"
    // #endif


const testMarkers = [{
            id: 0,
            latitude: 39.989631,
            longitude: 116.481018,
            title: '方恒国际 阜通东大街6号',
            zIndex: '1',
            rotate: 0,
            width: 20,
            height: 20,
            anchor: {
                x: 0.5,
                y: 1
            },
            callout: {
                content: '方恒国际 阜通东大街6号',
                color: '#00BFFF',
                fontSize: 10,
                borderRadius: 4,
                borderWidth: 1,
                borderColor: '#333300',
                bgColor: '#CCFF99',
                padding: '5',
                display: 'ALWAYS'
            }
        },
        {
            id: 1,
            latitude: 39.9086920000,
            longitude: 116.3974770000,
            title: '天安门',
            zIndex: '1',
            iconPath: '/static/location.png',
            width: 40,
            height: 40,
            anchor: {
                x: 0.5,
                y: 1
            },
            callout: {
                content: '首都北京\n天安门',
                color: '#00BFFF',
                fontSize: 12,
                borderRadius: 2,
                borderWidth: 0,
                borderColor: '#333300',
                bgColor: '#CCFF11',
                padding: '1',
                display: 'ALWAYS'
            }
        }
    ];
    const testPolyline = [{
            points: [{
                    latitude: 39.925539,
                    longitude: 116.279037
                },
                {
                    latitude: 39.925539,
                    longitude: 116.520285
                }
            ],
            color: '#FFCCFF',
            width: 7,
            dottedLine: true,
            arrowLine: true,
            borderColor: '#000000',
            borderWidth: 2
        },
        {
            points: [{
                    latitude: 39.938698,
                    longitude: 116.275177
                },
                {
                    latitude: 39.966069,
                    longitude: 116.289253
                },
                {
                    latitude: 39.944226,
                    longitude: 116.306076
                },
                {
                    latitude: 39.966069,
                    longitude: 116.322899
                },
                {
                    latitude: 39.938698,
                    longitude: 116.336975
                }
            ],
            color: '#CCFFFF',
            width: 5,
            dottedLine: true,
            arrowLine: true,
            borderColor: '#CC0000',
            borderWidth: 3
        }
    ];
    const testPolygons = [{
            points: [{
                    latitude: 39.781892,
                    longitude: 116.293413
                },
                {
                    latitude: 39.787600,
                    longitude: 116.391842
                },
                {
                    latitude: 39.733187,
                    longitude: 116.417932
                },
                {
                    latitude: 39.704653,
                    longitude: 116.338255
                }
            ],
            fillColor: '#FFCCFF',
            strokeWidth: 3,
            strokeColor: '#CC99CC',
            zIndex: 11
        },
        {
            points: [{
                    latitude: 39.887600,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.428932
                },
                {
                    latitude: 39.887600,
                    longitude: 116.428932
                }
            ],
            fillColor: '#CCFFFF',
            strokeWidth: 5,
            strokeColor: '#CC0000',
            zIndex: 3
        }
    ];
    const testCircles = [{
            latitude: 39.996441,
            longitude: 116.411146,
            radius: 15000,
            strokeWidth: 5,
            color: '#CCFFFF',
            fillColor: '#CC0000'
        },
        {
            latitude: 40.096441,
            longitude: 116.511146,
            radius: 12000,
            strokeWidth: 3,
            color: '#CCFFFF',
            fillColor: '#FFCCFF'
        },
        {
            latitude: 39.896441,
            longitude: 116.311146,
            radius: 9000,
            strokeWidth: 1,
            color: '#CCFFFF',
            fillColor: '#CC0000'
        }
    ];
    const testIncludePoints = [{
            latitude: 39.989631,
            longitude: 116.481018,
        },
        {
            latitude: 39.9086920000,
            longitude: 116.3974770000,
        }
    ];

    export default {
        data() {
            return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				timer: null, // 用于保存定时器
				nearestLocationId:0,
				firstLocationDistance:99999,
				nowIcon:'/static/now.png',
				recordIcon:'/static/record.png',
				exchangeIcon:'/static/ic_exchange_diable.png',
				listData: [],
				full:false,
				inputValue: '',
				showClearIcon: false,
				inputClearValue: '',
				changeValue: '',
                title: 'getLocation',
                hasLocation: false,
                location1: {},
                type: '',
				location: {
				    longitude: 116.3974770000,
				    latitude: 39.9086920000
				},
				 screenWidth: 375,
				 screenHeight: 667,
				controls: [{
				    id: 1,
				    position: {
				        left: 10,
				        top: 'calc(100% + 50rpx)',
				        width: 30,
				        height: 30
				    },
				    iconPath: '/static/locate.png',
				    clickable: true
				}],
				showLocation: false,
				scale: 13,
				showCompass: true,
				enable3D: true,
				enableOverlooking: true,
				enableZoom: true,
				enableScroll: true,
				enableRotate: true,
				enableSatellite: false,
				enableTraffic: false,
				polyline: [],
				markers: [],
				polygons: [],
				circles: [],
				includePoints: [],
				rotate: 0,
				skew: 0,
				
				locationList: [
					{
						"id": 1,
						"name": "主会场",
						"lon": "121.4737",
						"lat": "31.23037",
						"signed": false
					},
					{
						"id": 2,
						"name": "操场",
						"lon": "121.4737",
						"lat": "31.23037",
						"signed": false
					},
					{
						"id": 3,
						"name": "大礼堂",
						"lon": "121.4737",
						"lat": "31.23037",
						"signed": false
					},
					{
						"id": 4,
						"name": "学习发展中心",
						"lon": "121.4737",
						"lat": "31.23037",
						"signed": false
					},
					{
						"id": 5,
						"name": "音乐礼堂",
						"lon": "121.4737",
						"lat": "31.23037",
						"signed": false
					},
					{
						"id": 6,
						"name": "草坪广场",
						"lon": "121.4737",
						"lat": "31.23037",
						"signed": false
					}
				]

				
            }
        },
		onReady() {
		    this.map = uni.createMapContext("map1", this);
		},
		
		onLoad() {
		    // 获取屏幕信息
		    const systemInfo = uni.getSystemInfoSync()
		    this.screenWidth = systemInfo.windowWidth
			this.screenHeight =  systemInfo.windowHeight
		    this.setControlsPosition('/static/locate.png')
			console.log("start uni.getStorage")
			try {
				const value = uni.getStorageSync('user');
				console.log('uni.getStorageSync success.value='+value);
				if (value) {
					console.log('1');
				}else{
					 this.$nextTick(() => {
					        this.openLogin();
					      });
				}
			} catch (e) {
				// error
				console.log('uni.getStorageSync failed.'+e);
			}
			
			this.requestLocationList();
			
			// 立即执行一次
			    this.oncontroltap();
			    
			    // // 然后每10秒执行一次
			    // this.timer = setInterval(() => {
			    //   this.oncontroltap();
			    // }, 10000); // 10000毫秒 = 10秒
		},
		
		 onUnload() {
		    // 页面卸载时清除定时器，防止内存泄漏
		    if (this.timer) {
		      clearInterval(this.timer);
		      this.timer = null;
		    }
		  },
		
        methods: {
			messageToggle(type) {
				// this.msgType = type
				// this.messageText = '已领完'
				// this.$refs.message.open()
				this.exchangeIcon = '/static/ic_exchange_empty.png';
			},
			 getNearestLocationId() {
			    if (!this.location || !this.locationList || this.locationList.length === 0) {
			      return null;
			    }
			    
			    let minDistance = Infinity;
			    let nearestId = null;
				let nearestLocation = null;
				let firstDistance = Infinity;
			    
			    this.locationList.forEach(item => {
			      const distance = this.calculateDistance(
			        this.location.latitude,
			        this.location.longitude,
			        parseFloat(item.lat),
			        parseFloat(item.lon)
			      );
			      console.log("location distance for "+item.name+" is "+distance +" and item.lon="+item.lon+";item.lat="+item.lat+";and this.location="+this.location.longitude+","+this.location.latitude)
				  if(item.id==1){
					  firstDistance = distance;
				  }
			      if (distance < minDistance) {
			        minDistance = distance;
			        nearestId = item.id;
					nearestLocation = {
					          id: item.id,
					          name: item.name,
					          distance: distance,
					          originalData: item
					        };
			      }
			    });
			    
			    // return nearestId;
				return {
				      nearest: nearestLocation,
				      minDistance: minDistance,
					  firstDistance:firstDistance,
				    };
			  },
			  
			  // 计算两个坐标点之间的距离（单位：米）
			    calculateDistance(lat1, lon1, lat2, lon2) {
			      const R = 6371000; // 地球半径（米）
			      const dLat = this.toRad(lat2 - lat1);
			      const dLon = this.toRad(lon2 - lon1);
			      
			      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			                Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) *
			                Math.sin(dLon / 2) * Math.sin(dLon / 2);
			      
			      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			      const distance = R * c;
			      
			      return distance;
			    },
			    
			    // 角度转弧度
			    toRad(degrees) {
			      return degrees * (Math.PI / 180);
			    },
			
			requestLocationList(){
				uni.request({
					    url: this.$baseURL + '/daka/api/locationList',
						method: 'GET',
					    success: (res) => {
					        console.log(res.data);
					        if(res.data.code==0){
								this.locationList = res.data.data;
								console.log('this.locationList='+this.locationList)
							}
					    }
						
					});
			},
			
			
			
			doExchange: function(){
				if(this.full != 'true' ){
					return;
				}else{
					uni.request({
					    url: this.$baseURL + '/daka/api/exchange', 
						method: 'POST',
					    data: {
					        uid: uni.getStorageSync('user').id
					    },
					    header: {
					        'content-type': 'application/x-www-form-urlencoded' 
					    },
					    success: (res) => {
					        console.log(res.data);
					        if(res.data.code==0){
								try {
									this.closeRecord()
									this.openExSuccess()									
								} catch (e) {
									// error
									 console.log(e);
								}
							}else{
								this.messageToggle('error')
							}
					    }
					});
				}
			},
			
			formatTime(time) {
			      if (!time) return '-';
			      // 提取时间部分（HH:mm:ss）
			      return time.split(' ')[1] || '-';
			    },
			clearInput: function(event) {
			    this.inputClearValue = event.detail.value;
			    if (event.detail.value.length > 0) {
			        this.showClearIcon = true;
			    } else {
			        this.showClearIcon = false;
			    }
			},
			clearIcon: function() {
			    this.inputClearValue = '';
			    this.showClearIcon = false;
			},
			
			onNowIconClick(){
				if(this.nowIcon != '/static/now_light.png'){
					return;
				}else{
					this.requestSign();
				}
			},
			
			openLogin(){
				this.$refs.popupLogin.open('center')
			},
			
			openSuccess(){
				this.$refs.popupSuccess.open('center')
				this.nowIcon = '/static/now_light.png';
			},
			
			openRecord(){
				this.getListData();
				this.$refs.popupRecord.open('center')
				this.recordIcon = '/static/record_light.png'
			},
			
			
			openExSuccess(){
				this.$refs.popupExSuccess.open('center')
			},
			
			closeLogin() {
						this.$refs.popupLogin.close()
					},
					
				goRecord(){
					this.closeSucess();
					this.openRecord()
				},	
			
			closeSucess() {
						this.$refs.popupSuccess.close()
						this.nowIcon = '/static/now.png';
					},
			closeRecord() {
						this.$refs.popupRecord.close()
						this.recordIcon = '/static/record.png'
					},
			closeExSucess() {
						this.$refs.popupExSuccess.close()
					},
			setControlsPosition(iconPath) {
			        // 假设控件宽度为 40rpx，距离边缘 20rpx
			        const controlSize = 80
			        const margin = 40
			        
			        // 计算右下角位置
			        const left = this.screenWidth - uni.upx2px(controlSize + 20)
			        const top = this.screenHeight  - uni.upx2px(controlSize + 220)
			        
			        this.controls = [{
			            id: 1,
			            position: {
			                left: left,
			                top: top,
			                width: uni.upx2px(controlSize),
			                height: uni.upx2px(controlSize)
			            },
			            iconPath: iconPath,
			            clickable: true
			        }]
			    },
			
			// #ifndef MP-JD
			changeScale() {
			    this.scale = this.scale == 9 ? 15 : 9;
			},
			changeRotate() {
			    this.rotate = this.rotate == 90 ? 0 : 90;
			},
				changeSkew() {
				    this.skew = this.skew == 30 ? 0 : 30;
				},
				// #endif
			enableThreeD(e) {
			    this.enable3D = e.detail.value;
			},
			changeShowCompass(e) {
			    this.showCompass = e.detail.value;
			},
			changeEnableOverlooking(e) {
			    this.enableOverlooking = e.detail.value;
			},
			changeEnableZoom(e) {
			    this.enableZoom = e.detail.value;
			},
			changeEnableScroll(e) {
			    this.enableScroll = e.detail.value;
			},
			changeEnableRotate(e) {
			    this.enableRotate = e.detail.value;
			},
			changeEnableSatellite(e) {
			    this.enableSatellite = e.detail.value;
			},
			changeEnableTraffic(e) {
			    this.enableTraffic = e.detail.value;
			},
			addMarkers() {
			    this.markers = testMarkers;
			},
			addPolyline() {
			    this.polyline = testPolyline;
			},
				// #ifndef MP-JD
			addPolygons() {
			    this.polygons = testPolygons;
			},
				// #endif
			addCircles() {
			    this.circles = testCircles;
			},
			includePoint() {
			    this.includePoints = testIncludePoints;
			},
			handleGetCenterLocation() {
			    this.map.getCenterLocation({
			        success: ret => {
			            console.log(JSON.stringify(ret));
			            uni.showModal({
			                content: JSON.stringify(ret)
			            })
			        }
			    })
			},
			handleGetRegion() {
			    this.map.getRegion({
			        success: ret => {
			            console.log(JSON.stringify(ret));
			            uni.showModal({
			                content: JSON.stringify(ret)
			            })
			        }
			    })
			},
				// #ifndef MP-JD
			handleTranslateMarker() {
			    this.map.translateMarker({
			        markerId: 1,
			        destination: {
			            latitude: 39.989631,
			            longitude: 116.481018
			        },
			        duration: 2000
			    }, ret => {
			        console.log(JSON.stringify(ret));
			        uni.showModal({
			            content: JSON.stringify(ret)
			        })
			    });
			},
				// #endif
			maptap(e) {
				
			    // uni.showModal({
			    //     content: JSON.stringify(e)
			    // })
			},
			onmarkertap(e) {
			    // uni.showModal({
			    //     content: JSON.stringify(e)
			    // })
			},
			oncontroltap(e) {
				this.getLocation().then().catch(error=>{
					console.error("request location error:",error);
				});
			},
			oncallouttap(e) {
			    uni.showModal({
			        content: JSON.stringify(e)
			    })
			},
			onupdated(e) {
			    console.log(JSON.stringify(e))
			},
			onregionchange(e) {
			    console.log(JSON.stringify(e));
			},
			onpoitap(e) {
			    uni.showModal({
			        content: JSON.stringify(e)
			    })
			},
            togglePopup(type) {
                this.type = type;
            },
            showConfirm() {
                this.type = 'showpopup';
            },
            hideConfirm() {
                this.type = '';
            },
			checkRange(){
				const result = this.getNearestLocationId();
				
				if (result) {
				  console.log('ID:', result.nearest.id);
				  console.log('名称:', result.nearest.name);
				  console.log('距离:', result.minDistance + '米');
				  if(result.minDistance<800){
					  this.nowIcon = '/static/now_light.png';
					  this.nearestLocationId = result.nearest.id;
					  this.firstLocationDistance = result.firstDistance;
				  }
				}
				
			},
			getListData(){
				uni.request({
				    url: this.$baseURL + '/daka/api/record', 
					method: 'GET',
				    data: {
				        uid: uni.getStorageSync('user').id
				    },
				    success: (res) => {
				        console.log(res.data);
				        if(res.data.code==0){
							this.listData = res.data.data;
							this.full = res.data.msg;
							if(this.full == true || this.full =='true'){
								this.exchangeIcon = '/static/ic_exchange.png';
							}else{
								this.exchangeIcon = '/static/ic_exchange_diable.png';
							}
						}
				    }
				});
			},
			
			requestSign(){
				uni.request({
				    url: this.$baseURL + '/daka/api/sign', 
					method: 'POST',
				    data: {
				        uid: uni.getStorageSync('user').id,
						locationId:this.nearestLocationId,
						firstLocationDistance:this.firstLocationDistance
				    },
				    header: {
				        'content-type': 'application/x-www-form-urlencoded' 
				    },
				    success: (res) => {
				        console.log(res.data);
				        if(res.data.code==0){
							try {
								this.openSuccess()
							} catch (e) {
								// error
								 console.log(e);
							}
						}
				    }
				});
			},
			
			requestLogin(){
				uni.request({
				    url: this.$baseURL + '/daka/api/login', //仅为示例，并非真实接口地址。
					method: 'POST',
				    data: {
				        name: this.inputValue
				    },
				    header: {
				        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        if(res.data.code==0){
							try {
								uni.setStorageSync('user', res.data.data);
								this.closeLogin();
							} catch (e) {
								// error
								 console.log(e);
							}
						}
				    }
				});
			},
						
            async getLocation() {
                // #ifdef APP-PLUS
                let status = await this.checkPermission();
                if (status !== 1) {
                    return;
                }
                // #endif
                // #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
                let status = await this.getSetting();
                if (status === 2) {
                    this.showConfirm();
                    return;
                }
                // #endif
				// #ifdef MP-HARMONY
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						this.doGetLocation();
					},
					fail: () => {
						uni.showToast({
							title: "未授权获取地理位置权限"
						})
					}
				})
				// #endif
				// #ifndef MP-HARMONY
				this.doGetLocation();
				// #endif
            },
            doGetLocation() {
				this.setControlsPosition('/static/locating.gif')
				
                uni.getLocation({
                  type: 'gcj02',
                  isHighAccuracy: true,
                  highAccuracyExpireTime: 4000,
                    success: (res) => {
                        this.hasLocation = true;
                        // this.location = formatLocation(res.longitude, res.latitude);						
                        this.location = {
                          longitude: res.longitude.toString(),
                          latitude: res.latitude.toString()
                        };
						
						this.includePoints = [{
										latitude: this.location.latitude,
										longitude: this.location.longitude
									}
								];
						
						this.location1 = {
						  longitude: res.longitude.toString(),
						  latitude: res.latitude.toString()
						};
						
						this.markers = [{
										id: 1,
										latitude: this.location.latitude,
										longitude: this.location.longitude,
										title: '当前位置',
										zIndex: '1',
										iconPath: '/static/location.png',
										width: 40,
										height: 40,
										anchor: {
											x: 0.5,
											y: 1
										},
										callout: {
											content: '当前位置',
											color: '#ffffff',
											fontSize: 12,
											borderRadius: 2,
											borderWidth: 0,
											borderColor: '#333300',
											bgColor: '#5d73ff',
											padding: '1',
											display: 'ALWAYS'
										}
									}];
									this.setControlsPosition('/static/locate.png')
									
									//这里计算是否在可打卡范围
									this.checkRange()
                    },
                    fail: (err) => {
                        // #ifdef MP-BAIDU
                        if (err.errCode === 202 || err.errCode === 10003) { // 202模拟器 10003真机 user deny
                            this.showConfirm();
                        }
                        // #endif
                        // #ifndef MP-BAIDU
                        if (err.errMsg.indexOf("auth deny") >= 0) {
                            uni.showToast({
                                title: "访问位置被拒绝"
                            })
                        } else {
                            uni.showToast({
                                title: err.errMsg
                            })
                        }
                        // #endif
                    }
                })
            },
            getSetting: function() {
                return new Promise((resolve, reject) => {
                    uni.getSetting({
                        success: (res) => {
                            if (res.authSetting['scope.userLocation'] === undefined) {
                                resolve(0);
                                return;
                            }
                            if (res.authSetting['scope.userLocation']) {
                                resolve(1);
                            } else {
                                resolve(2);
                            }
                        }
                    });
                });
            },
            openSetting: function() {
                this.hideConfirm();
                uni.openSetting({
                    success: (res) => {
                        if (res.authSetting && res.authSetting['scope.userLocation']) {
                            this.doGetLocation();
                        }
                    },
                    fail: (err) => {}
                })
            },
            async checkPermission() {
                let status = permision.isIOS ? await permision.requestIOS('location') :
                    await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');

                if (status === null || status === 1) {
                    status = 1;
                } else if (status === 2) {
                    uni.showModal({
                        content: "系统定位已关闭",
                        confirmText: "确定",
                        showCancel: false,
                        success: function(res) {
                        }
                    })
                } else if (status.code) {
                    uni.showModal({
                        content: status.message
                    })
                } else {
                    uni.showModal({
                        content: "需要定位权限",
                        confirmText: "设置",
                        success: function(res) {
                            if (res.confirm) {
                                permision.gotoAppSetting();
                            }
                        }
                    })
                }

                return status;
            },
            clear: function() {
                this.hasLocation = false
            }
        }
    }
</script>

<style>
	
	.flex-item {
		
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		margin-top: 20rpx;
	}
	
	.content {
	    flex: 1;
		position: relative;
		width: 100%;
		height: 100vh;
	}
	
	.map {
	    width: 100vw;
	    height: 100vh;
	    margin: 0;
	    padding: 0;
	    background-color: #f0f0f0;
	}
	
	.scrollview {
	    flex: 1;
	    padding: 10px;
	}
	
	.list-item {
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: center;
	    padding: 5px 0px;
	}
	
	.list-text {
	    flex: 1;
	}
	
	.button {
	    margin-top: 5px;
	    margin-bottom: 5px;
	}
	
    .popup-view {
        width: 500rpx;
    }

    .popup-title {
        display: block;
        font-size: 16px;
        line-height: 3;
        margin-bottom: 10px;
        text-align: center;
    }

    .popup-buttons button {
        margin-left: 4px;
        margin-right: 4px;
    }
	
	.controls-panel {
	    position: absolute;
		width: 100vw;
		height: 200rpx;
		line-height: 200rpx;
		bottom: 1%;
	    background: rgba(255, 255, 255, 0);
	    border-radius: 10rpx;
	    padding: 0rpx;
	    z-index: 999;
	}
	
	.controls-panel-bg {
	    position: absolute;
		width: 100vw;
		height: 200rpx;
	    
	}
	
	.control-buttons {
		
	    display: flex;
		
	}
	
	.record-row-table{
		width: 33.3%;
				text-align: center;
	}
	
	.button {
	    margin: 0rpx 0;
	    background: #007AFF;
	    color: white;
	    border: none;
	    border-radius: 8rpx;
	    padding: 16rpx 24rpx;
	    font-size: 28rpx;
	}
	
	.divider {
	  height: 1rpx;
	  background-color: #e0e0e0;
	  margin: 5rpx 0;
	}
</style>
